<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="root">
        
    </div>
    <!-- 加载 React。-->
    <!-- 注意: 部署时，将 "development.js" 替换为 "production.min.js"。-->
    <script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
    <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>
    <script>
        /*
            React.createElement()
            第一个参数 是必填项 传入的是html  比如：div ul p li span
            第二个参数 是选填 传入的是这个标签的属性 比如 classname style
            第三个参数 是选填 传入的是他的子节点  比如 要显示的内容
        */
        // const p = React.createElement("p",{className:"p_1"},"胡育涵")
        const li1 = React.createElement("li",{className:"li_1"},"胡育涵")
        const li2 = React.createElement("li",{className:"li_2"},"张保泉")
        const li3 = React.createElement("li",{className:"li_3"},"李佳")
        
        const ul = React.createElement("ul",{className:"ul_1"},li1,li2,li3)
        const domContainer = document.querySelector('#root');
        ReactDOM.render(ul, domContainer);
    </script>
</body>
</html>